/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-12 17:45:14
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-16 18:45:55
 * @Deprecated: 否
 * @FilePath: /blog/src/admin/container/home/component/areaList/index.jsx
 */
import React, { useCallback } from 'react'
import { Button } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
// import { ReactSortable } from 'react-sortablejs'
import { SortableContainer } from 'react-sortable-hoc'
import styles from './style.module.scss'
import AreaItem from '../areaItem'
import { addPageChildrenAction, getChangePageChildPositionAction } from '../../../store/action'


// let refs = [];

const SortableList = SortableContainer(({ list }) => {
    return (
        <ul className={styles.list}>
            {
                list.map((item, index) => <AreaItem
                    key={index}
                    index={index}
                    value={index}
                />
                )
            }
        </ul>
    );
});

const AreaList = () => {

    const dispatch = useDispatch();
    const children = useSelector((state) => state.common.schema?.children || []);

    const addPageChildren = useCallback(() => {
        dispatch(addPageChildrenAction());
    }, [])

    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
        dispatch(getChangePageChildPositionAction(oldIndex, newIndex));
    }, [])

    return (
        <div>
            <SortableList
                list={children}//数据
                onSortEnd={onSortEnd}//拖动结束
                distance={5}//拖动距离多少算拖动
                lockAxis='y'//延什么轴拖动
            />
            <Button type='primary' ghost onClick={addPageChildren}>新增页面区块</Button>

        </div>
    )
}

export default AreaList;